<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Bandit-Blog前台</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/detail.css">
</head>

<body>
<c:import url="commons/header.jsp"></c:import>

<!-- 内容 -->
<div class="layui-container" style="height: auto">
    <!-- 上边界 -->
    <div class="layui-edge-top"> </div>
    <input type="text" id="blogID" value="${blogDetail.id}" hidden>
    <!-- laiui第一行 -->
    <div class="layui-row layui-col-space16">
        <!-- 内容左侧 -->
        <div class="layui-col-sm9 layui-col-lg9">
            <!-- 一篇博客 -->
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="detail-header">
                        <a>【原创】${blogDetail.title}</a>
                    </div>
                    <hr class="layui-border-cyan">
                    <div id="content_textarea" style="width: 90%">
                    <textarea>

                        ${blogDetail.content}
                    </textarea>
                    </div>

                    <hr class="layui-border-cyan">
                    <div class="blog-footer">
                        <div class="footer-item">
                            <i class="layui-icon">&#xe756;</i>${blogDetail.clickHit}
                        </div>
                        <div class="footer-item">
                            <i class="layui-icon">&#xe611;</i>${blogDetail.commentHit}
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="layui-panel">
                <form class="layui-form" action="" id="commentAdd">
                    <fieldset>评论</fieldset>
                    <hr>
                    <div class="layui-form-item">
                        <label class="layui-form-label">评论名</label>
                        <div class="layui-input-inline">
                            <input type="name" class="layui-input" name="name" id="name" placeholder="请输入联系名字" required lay-verify= "required" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系邮箱</label>
                        <div class="layui-input-inline">
                            <input type="email" class="layui-input" name="email" id="email" placeholder="请输入联系邮箱" required lay-verify= "required" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">内容</label>
                        <div class="layui-input-block">
                            <textarea name="content" id="content" class="layui-textarea" placeholder="在此处发表评论，请注意遵守道德与法律，网络不是法外之地" required lay-verify= "required" autocomplete="off" style="height: 100px;width:80%"></textarea>
                        </div>
                    </div>

                    <div class="layui-input-block">
                        <button class="layui-btn">点击发表</button>
                    </div>
                    <br>
                </form>
            </div>

            <br><br>
            <div>
                <fieldset class="layui-elem-quote">评论列表</fieldset>
                <ul class="comment_list" id="comment_list">

                </ul>
                <div id="commentPage"></div>
            </div>

        </div>

        <!-- 内容右侧 -->
        <div class="layui-col-sm3 layui-col-lg3 layui-col-space3">

            <!-- 个人信息 -->
            <div class="layui-card">
                <div class="layui-card-header">
                    不知道写啥
                </div>
                <div class="layui-card-body">
                    待更新
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<c:import url="commons/footer.jsp"></c:import>

<!-- 脚本 -->
<script>
    //JS
    layui.use(['element', 'layer', 'util', 'laydate','carousel','form'], function () {
        var element = layui.element,
            laydate = layui.laydate,
            layer = layui.layer,
            util = layui.util,
            carousel = layui.carousel,
            $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            menuRight: function () {
                layer.open({
                    type: 1,
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt' //右上角
                    ,
                    anim: 5,
                    shadeClose: true
                });
            }
        });

        $('#commentAdd').on('submit', function (e){
            let layer;
            layui.use(['layer'],function(){
                layer = layui.layer;
                layer.load(1);
            })
            e.preventDefault();
            let Data = $(this).serializeArray();
            console.log(Data);
            console.log($('#blogID').val());
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/AddComment',
                data: {
                    "name":Data[0].value,
                    "email":Data[1].value,
                    "content":Data[2].value,
                    "blog_id":$('#blogID').val()
                },
                dataType: 'json',
                success: function (res) {
                    console.log(res.msg);
                    parent.layer.closeAll();
                    layer.msg('发布成功！');
                    setTimeout(function(){
                        parent.layer.closeAll();
                        window.location.reload();
                    },2000)
                },
                error: function () {
                    console.log("错误");
                }
            })
        });
    });
</script>
<script>
    $.ajax({
        url: '${pageContext.request.contextPath}/queryCommentList',
        data: {
            blog_id:$('#blogID').val()
        },
        dataType: 'json',
        success(data) {
            console.log(data);
            let comment_List = [];
            for (let key in data.commentList){
                let element = `
                <li>
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <i class="layui-icon">&#xe612;</i>${"${data.commentList[key].name}"}<br>
                            <i class="layui-icon">&#xe618;</i>${"${data.commentList[key].email}"}<br>
                            <i class="layui-icon">&#xe63a;</i>${"${data.commentList[key].content}"}

                        </div>
                    </div>
                    <br>
                </li>
                            `
                comment_List.push(element);
            }
            $('#comment_list').empty().append(comment_List.join(''));
        }
    })
</script>
<script type="text/javascript">
    //markDown转HTMl的方法

    editormd.markdownToHTML("content_textarea", {
        htmlDecode: "style,script,iframe", //可以过滤标签解码
        emoji: true,
        taskList:true,
        tex: true,               // 默认不解析
        flowChart:true,         // 默认不解析
        sequenceDiagram:true,  // 默认不解析
        editor:false,
    });


</script>
</body>